<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 循环 tableCols 渲染表格列-->
      <template v-for="item in tableCols">
        <el-table-column
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>
      </template>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            icon="el-icon-edit-outline"
            circle
            @click="editRow(scope)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteRow(scope)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="编辑"
      :visible.sync="drawerConfig.drawer"
      :direction="drawerConfig.direction"
      :before-close="handleClose"
      size="50%"
    >
      <el-form ref="form" :model="drawerConfig.formData" label-width="80px">
        <template v-for="item in drawerEditForm.formItems">
          <el-form-item :key="item.prop" :label="item.label">
           
            <!-- component：vue提供出来渲染动态组件 -->
             <!-- v-bind 一次性绑定多个属性 -->
            <component
              :is="item.type"
              v-model="drawerConfig.formData[item.prop]"
              v-bind="item.config"
            ></component>

          </el-form-item>
        </template>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="drawerEditCancel">取 消 </el-button>
        <el-button type="primary" @click="drawerEditOk"> 确 定 </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 组件地址：components/customTable.vue
// 公共表格组件
export default {
  name: "customTable",
  props: {
    // 表格列
    tableCols: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 编辑弹窗字段
    drawerEditForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      drawerConfig: {
        drawer: false,
        direction: "rtl",
        formData: {
          name: "",
        },
      },
    };
  },
  mounted() {},
  created() {},
  methods: {
    customLog() {
      console.log("被调用");
    },
    // 编辑的方法
    editRow({ row }) {
      console.log(row);
      // 深拷贝数据
      this.drawerConfig.formData = JSON.parse(JSON.stringify(row));
      this.drawerConfig.drawer = true;
    },
    // 弹窗取消
    drawerEditCancel() {
      this.drawerConfig.drawer = false;
    },
    // 弹窗确定
    drawerEditOk() {
      // 解构数据
      let { id } = this.drawerConfig.formData;
      // 根据id去tableData里面找对应数据
      let findItem = this.tableData.find((item) => item.id === id);
      // 修改数据
      let keys = Object.keys(this.drawerConfig.formData);
      keys.forEach((key) => {
        findItem[key] = this.drawerConfig.formData[key];
      });
      this.drawerConfig.drawer = false;
      debugger;
      this.$emit("editRow", {
        row: findItem,
      });
    },
    // 关闭弹窗
    handleClose(done) {
      done();
    },
    deleteRow({ row }) {
      // 使用 this.$emit 触发父组件的 deleteRow 事件
      // 并传递当前行的数据
      this.$emit("deleteRow", {
        row,
      });
    },
  },
};
</script>

<style>
.demo-drawer__footer {
  padding: 20px;
}
</style>
